<script setup lang="ts">
import { onMounted, ref } from "vue";
import ResultComp from "@/components/ResultComp.vue";
import { useRoute, useRouter } from "vue-router";
import { getAllEvaluationId, getEvaluationResultById } from "@/apis";
import { useUserStore } from "@/store";
import { ElMessage } from "element-plus";
import moment from "moment";
import { ArrowDown } from '@element-plus/icons-vue'

moment.locale("zh-cn");

const discussions = ref<any[]>([]);
const router = useRouter();
const route = useRoute();
const store = useUserStore();
const option = ref("self");
const optionFlag = ref("自身历史");
const showInputFlag = ref(route?.query.isShow===undefined ? true : Boolean(parseInt(route?.query.isShow)));

onMounted(async () => {
  // const rawData = await getAllEvaluationId();
  // const rawData = await getEvaluationResultById("b35fe40d-35a4-4845-9c08-0fe807bd67a3");
  const rawData = await getEvaluationResultById(store.getUID, option.value);
  console.log(rawData);
  discussions.value = rawData.data?.eva_list;
});

const getEvaluationResultHandler = () => {
  showInputFlag.value = !showInputFlag.value;
};

const handleCommand = (command: string | number | object) => {
  optionFlag.value = command;
  if (command == "自身历史") {
    option.value = "self";
  } else if (command == "大区历史") {
    option.value = "region";
  } else {
    option.value = "all";
  }

  getEvaluationResultById(store.getUID, option.value)
    .then((response) => (discussions.value = response.data?.eva_list))
    .catch((error) => {
      if (error?.response?.data?.message === "User status error") {
        ElMessage.error("用户权限不足！");
        discussions.value = [];
      } else {
        console.log(error);
      }
    });
};

/**
 *
 * @param evaluationID {string}
 */
const handleClickGoToResult = (evaluationID: any) => {
  if (evaluationID) {
    // router.push(`/evaluationResult/${evaluationID}`);
    dynamicParamId.value = evaluationID;
    showInputFlag.value = !showInputFlag.value;
  } else {
    router.push("/evaluationResult");
  }
};

const dynamicParamId = ref(route?.query.id ===undefined ? "20701af5-9db8-4ca6-ac59-cce7099e67cc" : route?.query.id as string);

const timeFormatter = (row) => {
  let originalTime = moment(row.date);
  return originalTime.format("llll");
};
</script>

<template>
  <div>
    <div class="code-input" v-if="showInputFlag">
      <h3>请输入评估码，查询评估结果：</h3>
      <el-container>
        <el-input
          v-model="dynamicParamId"
          placeholder="请输入测评码"
          id="id-input"
        ></el-input>
        <el-button @click="getEvaluationResultHandler" type="primary" plain
          >查询结果
        </el-button>
      </el-container>
    </div>
    <br />
    <div>
      <el-dropdown v-if="showInputFlag" @command="handleCommand">
        <span class="el-dropdown-link"> <el-button type="primary">查询方式：{{ optionFlag }}<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button></span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="自身历史">自身历史</el-dropdown-item>
            <el-dropdown-item command="大区历史">大区历史</el-dropdown-item>
            <el-dropdown-item command="所有历史">所有历史</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div v-if="!showInputFlag">
      <result-comp :eva-id="dynamicParamId"></result-comp>
    </div>
    <!--    <div v-if="showInputFlag">-->
    <!--      请按照下面的表头，将各水厂同一时期所对应的数据在excel表格中罗列好，随后复制到下面的粘贴区域即可（注：输入的数据不可为负值）。其中，药剂的选择应尽可能的选择各个水厂都用到的药剂，以增加水厂之间的可比性。用户可根据水厂的情况，自行加列，以选择多种药剂。固定好药剂种类后，按照表头输入数据即可开展评估。-->
    <!--    </div>-->
    <br />
    <div v-if="discussions.length === 0">暂无历史评估记录</div>
    <!-- <el-card
      v-if="showInputFlag"
      v-for="discussion in discussions"
      :key="discussion.uuid"
      class="box-card"
    > -->
    <!-- <template #header> -->
    <el-table :data="discussions" v-if="showInputFlag" style="width: 100%">
      <!-- <el-table-column prop="uuid" label="测评ID" width="180" />  -->
      <el-table-column prop="name" label="测评名称" width="300" />
      <el-table-column
        prop="date"
        label="测评时间"
        :formatter="timeFormatter"
      />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleClickGoToResult(scope.row.uuid)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- </template> -->
    <!-- <div
      class="card-header"
      @click="handleClickGoToResult(discussion?.uuid)"
    >
      测评ID: {{ discussion?.uuid }} | 测评名称: {{ discussion?.name }}
    </div>
    <el-button @click="handleClickGoToResult(discussion.uuid)" type="primary" plain
      >查询结果
    </el-button>
  </template> -->

    <!-- <div class="text item">
      <div @click="handleClickGoToResult(discussion.uuid)">
        复制上面的评估码查询
      </div>
    </div> -->
    <!-- </el-card> -->
  </div>
</template>

<style scoped>
#id-input {
  min-width: 200px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(#1890ff);
  display: flex;
  align-items: center;
}
</style>
